<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-button type="primary" @click="showEditDialog('')">添加规则</el-button>
        </el-col>
      </el-row>
      <el-table :data="openRuleList" border stripe>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="城市" prop="cityNames"></el-table-column>
        <el-table-column label="院线" prop="lineNames"></el-table-column>
        <el-table-column label="添加时间" prop="addTime"></el-table-column>
        <el-table-column label="排序" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sortNum" class="form_ipt" @change="updateSortNum(scope.row)" style="width:90px;"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="Y"
                inactive-value="N"
                @change="updateStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="修改">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="修改规则" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
      <el-form :model="editForm"  ref="editFormRef" label-width="90px" class="demo-ruleForm">
        <el-form-item label="规则名称" prop="name">
          <el-input v-model="editForm.name" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="mobile">
          <el-select v-model="selectCityCodeList" multiple placeholder="请选择">
            <el-option
                v-for="item in cityList"
                :key="item.cityCode"
                :label="`${item.pinyin.substr(0,1).toUpperCase()}-${item.name}`"
                :value="item.cityCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="院线" prop="mobile">
          <el-select v-model="selectLineIdList" multiple placeholder="请选择">
            <el-option
                v-for="item in lineList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editOpenRule">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from '@/api/Movie.js'
export default {
  data() {
    return {
      queryInfo: {
      },
      openRuleList: [],
      cityList: [],
      lineList: [],
      selectCityCodeList: [],
      selectLineIdList: [],
      editDialogVisible: false,
      editForm: {
        name:'',
        lineIds:'',
        cityCodes:''
      },
    }
  },
  created() {
    this.getOpenRuleList()
    this.getGplineList()
    this.getCityList()
  },
  methods: {
    showCinemaOpenRule() {
      this.addDialogVisible = true;
      this.getOpenRuleList();
    },
    getOpenRuleList() {
        Api.getCinemaOpenRuleList(this.queryInfo).then(res => {
            if (res.success) {
                this.openRuleList = res.data;
            } else {
                return this.$message.error('获取数据失败')
            }
        })
    },
    getGplineList() {
      Api.getCinemaGplineList(this.queryInfo).then(res => {
        if (res.success) {
          this.lineList = res.data;
        } else {
          return this.$message.error('获取数据失败')
        }
      })
    },
    getCityList() {
      Api.getCityList(this.queryInfo).then(res => {
        if (res.success) {
          this.cityList = res.data;
        } else {
          return this.$message.error('获取数据失败')
        }
      })
    },
    updateSortNum(cinemainfo) {
      Api.setCinemaOpenRuleSortNum({'id':cinemainfo.id, 'sortNum':cinemainfo.sortNum}).then(res => {
        if (res.success) {
          this.$message.success('设置成功！')
        } else {
          return this.$message.error('设置失败！')
        }
      })
    },
    updateStatus(cinemainfo) {
      Api.setCinemaOpenRuleStatus({'id':cinemainfo.id, 'status':cinemainfo.status}).then(res => {
        if (res.success) {
          this.$message.success('设置成功！')
        } else {
          return this.$message.error('设置失败！')
        }
      })
    },
    async showEditDialog(id) {
      Api.getCinemaOpenRule({'id':id}).then(res => {
            if (res.success) {
              this.editForm = res.data.openRule
              this.selectCityCodeList = res.data.selectCityCodeList
              this.selectLineIdList = res.data.selectLineIdList
              this.editDialogVisible = true
            } else {
              return this.$message.error('查询失败')
            }
        })
    },
    // 修改
    editOpenRule() {
      this.editForm.lineIds = this.selectLineIdList.join(',');
      this.editForm.cityCodes = this.selectCityCodeList.join(',');
      Api.saveCinemaOpenRule(this.editForm).then(res => {
        if (res.success) {
          this.editDialogVisible = false
          this.getOpenRuleList()
          this.$message.success('保存成功！')
        } else {
          return this.$message.error('保存失败: ' + res.msg)
        }
      })
    },
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    }
  },
}
</script>

<style lang="less" scoped>
</style>
